import React, { Component } from 'react';
import './main.css';

const TweenMax =  window.TweenMax;
let anmation1;
let anmation2;
let anmation3;
let anmation4;

class Usage extends Component {
  componentDidMount() {
    anmation1 = TweenMax.to(".green", 1, {x: 550});
    anmation1.pause();

    anmation2 = TweenMax.to('.orange', 1, {x: 550, autoAlpha: 0});
    anmation2.pause();

    anmation3 = TweenMax.from('.blue', 1, {x: 550, autoAlpha: 0});
    anmation3.pause();

    anmation4 = TweenMax.fromTo('.red', 2, {x: '-=200px'}, {x: 150});
    anmation4.pause();
  }
  
  playAnmation = () => {
    anmation1.play();
  }

  playAnmation2 = () => {
    anmation2.play();
  }

  playAnmation3 = () => {
    anmation3.play();
  }
  playAnmation4 = () => {
    anmation4.play();
  }

  render() {
    return (
      <div>
        <h2>支持的元素</h2>
        <p><code>TweenMax</code>支持两种元素，一种是<code>jquery</code>的元素，还有一种是<code>javascript</code>的原生元素</p>
        <p>甚至你直接用<code>".class"</code>或者<code>"#id"</code>都是可以的</p>
        <h2>动画方法</h2>
        <ul>
          <li><code>to</code>方法</li>
          <li><code>from</code>方法</li>
          <li><code>fromTo</code>方法</li>
        </ul>
        <div>
          <h3>to方法</h3>
          <p>最常用的方法就是<code>to</code>方法:</p>
          <p>
            <code>{`TweenMax.to(".green", 1, {x:550});`}</code>
          </p>
          <p>第一个参数就是需要添加动画的<mark>元素</mark>，第一个参数也可以传<mark>数组</mark>进去操作多个元素</p>
          <p>第二参数是动画<mark>持续的时间</mark></p>
          <p>第三个参数是动画的运动方式，运动次数，重复运动几次等等，<mark>全部都设置在一个<code>object</code>中</mark></p>
        </div>
        <h4>例子：</h4>
        <div>
          <div className="box green"></div>
          <div className="btns">
            <button className="btn" onClick={this.playAnmation}>play</button>
          </div>
        </div>
        <div style={{ marginTop: 20 }}>
          <blockquote>
            在GreenSock中，一些CSS属性对应到GreenSock中还是有些不同的。比如transform中translate在GreenSock中使用x,y就对应着translate(x,y)。任何的CSS属性需要从有－的写法变为驼峰式的写法。比如background-color修改为backgroundColor等。以及CSS中的transform:rotate()变为rotation。
          </blockquote>
        </div>
        <h3>from方法</h3>
        <p><code>from</code>方法的解释有点绕，反正我语文不好，我直接上例子，看下面两个例子就明白了</p>
        <h4>to方法</h4>
        <div>
          <code>{`TweenMax.to(".orange", 1, {x:550, autoAlpha: 0});`}</code>
        </div>
        <div style={{ marginTop: 10 }}>
          <div className="box orange"></div>
          <div className="btns">
            <button className="btn" onClick={this.playAnmation2}>play</button>
          </div>
        </div>
        <h4>from方法</h4>
        <div>
          <code>{`TweenMax.from(".blue", 1, {x:550, autoAlpha: 0});`}</code>
        </div>
        <div style={{ marginTop: 10 }}>
          <div className="box blue"></div>
          <div className="btns">
            <button className="btn" onClick={this.playAnmation3}>play</button>
          </div>
        </div>
        <div>解释就是<b>从指定的属性的值运动到元素的初始值</b></div>
        <h3>fromTo方法</h3>
        <p>定义元素的起始位置</p>
        <p>通过上面的两个例子，也知道这个方法该怎么用了吧，确定开始位置和结束位置</p>
        <div>
          <code>{`TweenMax.fromTo('.red', 2, {x: '-200px'}, {x: 150});`}</code>
        </div>
        <div>
          <div className="box red"></div>
          <div className="btns">
            <button className="btn" onClick={this.playAnmation4}>play</button>
          </div>
        </div>
      </div>
    );
  }
}

export default Usage;